<template>
	<div class="win-box">
		<!-- 开机动画 -->
		<div class="power-on" ref="powerOn">
			<img src="../assets/imgs/windows.png">
			<div class="loading">
				<hr />
				<hr />
				<hr />
				<hr />
			</div>
		</div>
		<!-- 电脑桌面 -->
		<div class="desk-top" ref="deskTop" :style="deskTopBackground">
			<!-- 程序图标 -->
			<IntegratedIconGrid @qiehuan="_Theme_Change" @openWindow="openWindow" />
			<!-- 统一窗口组件 -->
			<myWindow v-for="item in openWindowList" :key="item.id" :ref="el => { if (el) windowRefs[item.id] = el }"
				v-model:isVisible="item.value" :id="item.id" :title="item.name" @close="handleClose(item.id)"
				@minimize="windowMinimize(item.id)" :param1="item.iconPath" :address="item.address" />
			<!-- 底部功能 -->
			<div class="my-bottom-box">
				<div class="my-win-btn btn-box">
					<svg t="1726111894777" v-for="item in 4" style="margin: 4px;" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="937" width="20" height="20">
						<path
							d="M972.591787 293.944889c-50.062222-101.432889-135.338667-172.259556-253.610667-210.602667-171.633778-55.864889-295.936-11.548444-369.948444 35.498667a499.256889 499.256889 0 0 0-152.746667 157.866667c-8.419556 14.563556-20.081778 35.271111-31.061333 59.505777h-34.417778c-58.88 0-72.704 28.330667-76.117334 41.073778L22.092231 470.243556a38.798222 38.798222 0 0 0 3.584 33.052444 35.783111 35.783111 0 0 0 27.648 16.839111l27.192889 2.673778c-3.982222 9.671111-7.793778 18.887111-11.207111 27.534222-33.621333 84.764444-66.616889 199.111111-68.039111 203.832889a29.297778 29.297778 0 0 0 15.132444 34.247111 28.046222 28.046222 0 0 0 35.498667-9.614222 44.032 44.032 0 0 1 48.64-12.288 3318.670222 3318.670222 0 0 1 368.355555 123.164444 220.956444 220.956444 0 0 0 88.064 20.48 122.140444 122.140444 0 0 0 112.526223-71.623111c8.419556-17.521778 15.758222-35.555556 22.072889-53.987555a276.252444 276.252444 0 0 0 280.234666 16.440889 30.037333 30.037333 0 0 0 15.018667-17.066667c4.380444-12.288 90.282667-279.153778-14.222222-489.984zM406.66112 534.129778a1179.477333 1179.477333 0 0 0-243.427556-59.960889l-29.240888-4.323556-29.240889-3.868444-20.024889-2.104889 23.608889-67.299556a55.921778 55.921778 0 0 1 22.641777-3.299555h37.831112c11.036444 0 20.024889 1.479111 30.264888 2.503111 83.456 8.419556 177.322667 31.175111 221.582223 61.553778l8.419555 5.973333-22.414222 70.826667z"
							style="fill: var(--thisText);transition: all 0.3s;" p-id="938"></path>
					</svg>
				</div>
				<div class="my-win-btn btn-box noHover" v-show="openWindowList.length != 0">
					<div v-for="(item, index) in openWindowList" @click="recoveryWindow(item)" class="task-icon"
						:key="item.id">
						<img :src="item.iconPath" alt="">
					</div>
				</div>
				<div class="my-theme-btn btn-box" @click="_Theme_Change">
					<svg v-show="ThemeLight" viewBox="0,0,307,307" ref="thisLight" class="light"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">
						<defs>
							<clipPath id="theme-light-clip0">
								<rect x="79" y="77" width="307" height="307" />
							</clipPath>
							<linearGradient x1="128.499" y1="49.9991" x2="337.501" y2="412.001"
								gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="theme-light-fill1">
								<stop offset="0" stop-color="#FFC567" />
								<stop offset="0.18" stop-color="#FFC567" />
								<stop offset="0.8" stop-color="#EE54F2" />
							</linearGradient>
						</defs>
						<g clip-path="url(#theme-light-clip0)" transform="translate(-79 -77)">
							<path
								d="M80 231C80 146.5 148.5 78 233 78 317.5 78 386 146.5 386 231 386 315.5 317.5 384 233 384 148.5 384 80 315.5 80 231Z"
								fill="url(#theme-light-fill1)" fill-rule="evenodd" />
						</g>
					</svg>
					<svg v-show="!ThemeLight" viewBox="0,0,275,294" ref="thisDark" class="dark"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">
						<defs>
							<clipPath id="theme-dark-clip0">
								<rect x="525" y="230" width="275" height="294" />
							</clipPath>
							<linearGradient x1="599.492" y1="203.887" x2="725.508" y2="550.113"
								gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="theme-dark-fill1">
								<stop offset="0" stop-color="#2474B6" />
								<stop offset="0.42" stop-color="#2474B6" />
								<stop offset="0.98" stop-color="#FFD966" />
								<stop offset="1" stop-color="#FFD966" />
							</linearGradient>
						</defs>
						<g clip-path="url(#theme-dark-clip0)" transform="translate(-525 -230)">
							<path
								d="M635.002 236.062C638.664 240.491 639.245 246.694 636.469 251.721 625.869 271.094 620.334 292.809 620.372 314.869 620.372 388.255 680.469 447.679 754.537 447.679 764.199 447.679 773.604 446.675 782.643 444.759 788.307 443.538 794.156 445.809 797.493 450.526 801.036 455.459 800.803 462.148 796.925 466.824 767.803 502.434 724.103 523.073 677.976 523 593.458 523 525 455.217 525 371.701 525 308.846 563.757 254.933 618.942 232.083 624.588 229.708 631.132 231.329 635.002 236.062Z"
								fill="url(#theme-dark-fill1)" fill-rule="evenodd" />
						</g>
					</svg>
				</div>
				<div class="my-power-btn btn-box" @click="_Power_Click(1)">
					<svg viewBox="1 7 29 15" width="22px" height="11px" version="1.1" id="svg4">
						<path
							d="M 4 7 C 2.3550302 7 1 8.3550302 1 10 L 1 19 C 1 20.64497 2.3550302 22 4 22 L 24 22 C 25.64497 22 27 20.64497 27 19 L 27 10 C 27 8.3550302 25.64497 7 24 7 L 4 7 z M 4 9 L 24 9 C 24.56503 9 25 9.4349698 25 10 L 25 19 C 25 19.56503 24.56503 20 24 20 L 4 20 C 3.4349698 20 3 19.56503 3 19 L 3 10 C 3 9.4349698 3.4349698 9 4 9 z M 5 11 L 5 18 L 23 18 L 23 11 L 5 11 z M 28 12 L 28 17 L 29 17 C 29.552 17 30 16.552 30 16 L 30 13 C 30 12.448 29.552 12 29 12 L 28 12 z"
							id="path2" style="fill: var(--thisText);transition: all 0.3s;" />
					</svg>
					<div class="s-icon"></div>
					<div class="s-icon" style="margin-left: 4px;"></div>
				</div>
				<div class="my-time-btn btn-box" @click="_Power_Click(2)">
					<span class="time-text">{{ currentTime }}</span>
				</div>
			</div>
			<!-- ai助手 -->
			<div class="rainbow-container-main" @click="openAIAssistant">
				<div class="rainbow-container">
					<div class="green"></div>
					<div class="pink"></div>
					<div class="blue"></div>
				</div>
			</div>
		</div>
		<!-- 底部弹窗， -->
		<BottomDialog ref="bottomDialogRef" :isVisible="showPowerDialog" :type="BottomDialogType" />
		<myGpt v-if="showAIAssistant" @close="closeAIAssistant" />
		<!-- 关机动画 -->
		<div class="power-off" ref="powerOff"></div>
		<audio ref="audioRef" :src="loginAudio" id="startup-music"></audio>
	</div>
</template>

<script setup>
import {
	ref,
	onMounted,
	onUnmounted,
	getCurrentInstance,
	reactive
} from 'vue';
import IntegratedIconGrid from '@/components/IntegratedIconGrid.vue';
import myWindow from '@/components/myWindow.vue';
import myGpt from '@/components/myGpt.vue';
import BottomDialog from '@/components/BottomDialog.vue';

const powerOn = ref(null);
const deskTop = ref(null);
const powerOff = ref(null);
const bottomDialogRef = ref(null);

const {
	proxy
} = getCurrentInstance();
let loginAudio = ref('');
loginAudio.value = proxy.$util.urlProceMedia('startup.mp3');
let audioRef = ref(null);
const app = document.querySelector('#app');
let timer;
const currentTime = ref('');
onMounted(() => {
	timer = setInterval(() => {
		if (bottomDialogRef.value) {
			currentTime.value = bottomDialogRef.value.currentTime;
		}
	}, 1000);
	setTimeout(() => {
		proxy.$refs.powerOn.style.opacity = 0;
		app.classList.add('theme-l');
		setTimeout(() => {
			proxy.$refs.deskTop.style.opacity = 1;
		}, 1000);
		audioRef.value?.play()
	}, 3000);
});
onUnmounted(() => {
	clearInterval(timer);
});




// 底部功能
const ThemeLight = ref(true);
const thisLight = ref(null);
const thisDark = ref(null);
const showPowerDialog = ref(false);
const BottomDialogType = ref(0);
const BottomDialogTypeTemporary = ref(0);//临时

const deskTopBackground = reactive({
	backgroundImage: `url(${proxy.$util.urlProceImgs('desktop_light.jpg')})`,
});

const _Theme_Change = () => {
	const L_or_D = ThemeLight.value;
	const refKey = L_or_D ? ['thisLight', 'thisDark', 'desktop_dark.jpg', 'theme-d'] : ['thisDark',
		'thisLight', 'desktop_light.jpg', 'theme-l'
	];
	proxy.$refs[refKey[0]].style.marginTop = 'calc(5vh + 5px)';
	proxy.$refs[refKey[0]].style.opacity = 0;
	setTimeout(() => {
		ThemeLight.value = !L_or_D;
		app.className = '';
		app.classList.add(refKey[3]);
		setTimeout(() => {
			proxy.$refs[refKey[1]].style.marginTop = '5px';
			proxy.$refs[refKey[1]].style.opacity = 1;
		}, 300);
		deskTopBackground.backgroundImage = `url(${proxy.$util.urlProceImgs(refKey[2])})`;
	}, 300);
};
const _Power_Click = (type) => {
	BottomDialogType.value = type;
	//当前有弹窗，只改变type
	if (BottomDialogTypeTemporary.value == type) {
		showPowerDialog.value = false;
		BottomDialogTypeTemporary.value = 0;
	} else {
		showPowerDialog.value = true
		BottomDialogTypeTemporary.value = type;
	}
};



// 图标窗口操作逻辑
const openWindowList = reactive([]);
const windowRefs = reactive({});
//关闭
const handleClose = (id) => {
	const index = openWindowList.findIndex((item) => item.id === id);
	if (index !== -1) {
		openWindowList[index].value = false;
		setTimeout(() => {
			openWindowList.splice(index, 1);
		}, 500);
	}
};
//最小
const windowMinimize = (id) => {
	const window = openWindowList.find((item) => item.id === id);
	if (window) {
		window.value = false;
	}
};
// 重新显示
const recoveryWindow = (item) => {
	const window = openWindowList.find((w) => w.id === item.id);
	// TODO:点击的窗口要置顶层
	// if (window) {
	window.value = true;
	if (windowRefs[item.id]) {
		windowRefs[item.id].restoreWindow();
	}
	// }
};
//打开图标
const openWindow = (param) => {
	const existingWindow = openWindowList.find((item) => item.id == param.id);
	if (existingWindow) {
		existingWindow.value = true;
		if (windowRefs[param.id]) {
			windowRefs[param.id].restoreWindow();
		}
	} else {
		openWindowList.push({ ...param, value: true })
	}
};
//ai对话框
const showAIAssistant = ref(false);

const openAIAssistant = () => {
	showAIAssistant.value = true;
};

const closeAIAssistant = () => {
	showAIAssistant.value = false;
};
</script>

<style scoped lang="less">
.task-icon {
	padding: 4px;
	border-radius: 4px;
	transition: all 0.3s;
	cursor: pointer;

	&:hover {
		background-color: var(--thisHover);
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	}

	&:active {
		transform: scale(0.9);
		filter: opacity(0.6) !important;
	}

	img {
		display: block;
		width: 20px;
		height: 20px;
	}
}

.my-time-btn {
	display: flex;
	align-items: center;
	justify-content: center;

	.time-text {
		font-weight: bold;
	}
}

.win-box {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: black;
	position: absolute;

	.power-on {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		transition: all 1s;

		img {
			height: 20%;
		}

		.loading {
			width: 65px;
			height: 65px;
			margin-top: 15vh;
		}

		.loading hr {
			border: 0;
			margin: 0;
			width: 25px;
			height: 25px;
			position: absolute;
			border-radius: 50%;
			animation: spin 4s ease infinite;
		}

		.loading :first-child {
			background: #fff;
			animation-delay: -3s;
		}

		.loading :nth-child(2) {
			background: #fff;
			animation-delay: -2s;
		}

		.loading :nth-child(3) {
			background: #fff;
			animation-delay: -1s;
		}

		.loading :last-child {
			background: #fff;
		}

		@keyframes spin {

			0%,
			100% {
				transform: translate(0);
			}

			25% {
				transform: translate(160%);
			}

			50% {
				transform: translate(160%, 160%);
			}

			75% {
				transform: translate(0, 160%);
			}
		}
	}

	.desk-top {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-size: 100% 100%;
		transition: all 1s;

		.grid {
			display: grid;
			grid-template-columns: repeat(16, 1fr);
		}

		.item {
			cursor: default;
			padding: 8%;
			box-sizing: border-box;
			height: 6.25vw;

			.item-hover {
				width: 100%;
				height: 100%;
				padding-top: 5%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				flex-direction: column;
				overflow: hidden;
				border-radius: 5px;

				&:hover {
					background-color: rgba(255, 255, 255, 0.75);
				}
			}

			img {
				width: 40px;
				height: 40px;
				max-width: 50%;
				max-height: 50%;
			}

			.item-text {
				margin-top: 2px;
				font-size: 12px;
				text-shadow: 2px 2px 2px #202020;
				transform: scale(0.8);
			}
		}
	}
}

// ai助手球样式
@import url('../assets/css/AiBall.css');
@import url('../assets/css/BottomBox.less');
</style>